<template>
  <div class="user-info-container">
    <template v-if="!UserStore.isLoggedIn">
      <span class="not-logged-in" @click="handleInitLogin">登陆</span>
      <span class="not-logged-in">/</span>
      <span class="not-logged-in regirer" @click="handleInitRegister">注册</span>
    </template>
    <template v-else>
      <!-- <el-dropdown>
        <div class="el-dropdown-link a-l_c">
          <img
            :src="UserStore.personalDetailInfo.avatar || avatar"
            class="userIcon"
            alt=""
          />
          <div class="user-info-detail">
            <span class="username">{{ phoneHide(UserStore.userInfo.phone) }}</span>
          </div>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handelLoginOut">退&emsp;出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>-->

      <div class="el-dropdown-link a-l_c">
        <img
          v-if="UserStore.personalDetailInfo?.avatar"
          :src="UserStore.personalDetailInfo?.avatar"
          class="userIcon"
          alt=""
        />
        <img
          v-else
          src="@/static/image.png"
          class="userIcon"
          alt=""
        />
        <div class="user-info-detail column j-c_s-b">
          <div class="username">{{ phoneHide(UserStore.userInfo.phone) }}</div>
          <div class="bottom a-l_c j-c_s-b">
            <div class="menu-item" @click="skipPersonCenter">个人中心</div>
            <div class="menu-item" @click="handelLoginOut">退出</div>
            <!-- <el-button link @click="skipPersonCenter">个人中心</el-button>
            <el-button link @click="handelLoginOut">退出</el-button> -->
          </div>
        </div>
      </div>
    </template>

    <LoginMask></LoginMask>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "~/stores/User.js";
import { phoneHide } from "@/utils/index";
import { useLoginStore } from "~/stores/Login.js";
import { ElMessage } from "element-plus";
const userAvatar = ref("");
const username = ref("");
const userEmail = ref("");
const isLoggedIn = ref(false);
const UserStore = useUserStore();
const LoginStore = useLoginStore();
const router = useRouter();
const loginOutTimer = ref(null);
const handleInitLogin = () => {
  LoginStore.handleUpdate([
    {
      key: "tabList",
      value: [
        { label: "密码登录", name: "password" },
        { label: "短信登录", name: "verification" },
        { label: "扫码登录", name: "qrcode" },
      ],
    },
    { key: "isActive", value: "password" },
  ]);
  UserStore.saveRegisterInfo.rePhone = false;
  UserStore.closeMaskOut(true);
};
const handleInitRegister = () => {
  try {
    UserStore.closeMaskOut(false);
    // LoginStore.handleUpdate(
    //   [{key:'tabList',value:[{label:"验证登录手机号信息",name:"verification"}]},{key:'isActive',value:'verification'}]);
    router.push({ path: "/registerUser" });
    // await navigateTo('/registerUser', {
    //   force: true
    // })
  } catch (error) {
    console.error("Navigation error:", error);
  }
};
// registerUser

// Example of how to set the user info
// This should be replaced with actual logic to fetch user data

// Call setUser when the component is mounted

const skipPersonCenter = () => {
  router.push({ path: "/personCenter" });
};

// 退出登录
const handelLoginOut = () => {
  ElMessage.success("已退出");
  localStorage.clear();
  if (loginOutTimer.value) clearTimeout(loginOutTimer.value);
  loginOutTimer.value = setTimeout(async () => {
    await navigateTo(`/gmat`, { external: true });
  }, 1000);
};
</script>

<style scoped>
.el-dropdown-link {
  color: var(--el-color-primary);
}

.menu-item {
  cursor: pointer;
  text-decoration: none;
  color: #f0f6f7;
  font-size: 14px;
  &:hover {
    color: #ffffff;
    font-weight: 600;
  }

}

.user-info-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.userIcon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.user-info-detail {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.username {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.user-email {
  font-size: 14px;
  color: #666;
}

.not-logged-in {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}
</style>
